<template>
<!--  公益捐钱页面-->
  <div id="top">
    <div>
      <el-card id="search">
<!--        <el-input v-model="titlename" placeholder="请输入标题名"></el-input>-->
        <el-input v-model="userInfo" placeholder="请输入发布者姓名"></el-input>
        <el-button type="primary" plain @click="doQury()">查询</el-button>
      </el-card>
    </div>
    <el-table :data="currentPageData" stripe id="ta">
      <el-table-column prop="did" label="捐赠ID" width="200" class="tata"/>
      <el-table-column prop="dmoney" label="捐赠金额" width="300" class="tata"/>
      <el-table-column prop="user.uname" label="捐赠者" width="300" class="tata"/>
      <el-table-column prop="createdate" label="捐赠时间" width="650" class="tata"/>
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="viewDetall(scope.row)">查看单号</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页组件-->
    <el-pagination
        v-model="currentPage"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalData.length"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
<!--  查看-->
  <el-dialog
      v-model="dialogVisible"
      title="单号详情"
      width="30%"
      :before-close="handleClose">
    <table>
      <tr>
        <td>{{user.duuid}}</td>
      </tr>
    </table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="dialogVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import doThis from "@/api/getData";
export default {
  name: "AdoptList",
  data(){
    return{
      moneylist:[],
      userInfo:'',
      dialogVisible:false,
      user:{},
      userList: [],
      //  分页
      tableData: [], // 总数据
      totalData: [], // 总数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的条数
    }
  },
  computed:{
    // 根据当前页面和每页显示的条数，计算分页后的数据
    currentPageData() {
      const { totalData, currentPage, pageSize } = this;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      return totalData.slice(start, end);
    },
  },
  mounted() {
     this.getMoneyList()
  },
  methods: {
    // 切换页码时的回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    getMoneyList(){
      doThis.doGet("/Donatemoney/list",null).then(res =>{
        console.log('res=========',res)
        // this.moneylist=res.data
        this.tableData=res.data
        this.totalData=res.data
      })
    },
    doQury(){
      doThis.doGet('/Donatemoney/list',{uname:this.userInfo}).then(res =>{
        console.log('res========',res.data)
        // this.moneylist=res.data
        this.tableData=res.data
        this.totalData=res.data
      })
    },
    viewDetall(row){
      this.user=row
      this.dialogVisible=true
    },
  }
}
</script>

<style scoped>

.tata{
  width: 400px;
}
#top{
  margin-top: 47px;
  margin-left: -30px;
  background-color: #EBEBEB;
}

#search .el-input {
  width: 200px;
  margin-left: 30px;
  margin-right: 30px;
}

#search .el-button {
  margin-left: 30px;
  margin-right: 30px;
}
</style>